import React, { useEffect, useState } from 'react'
import { DatePicker, Button, Form, Select, Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
import { getAdmList } from '&/api/electricity'
import dayjs from 'dayjs'

const Filter = ({ handleQuery, paramsData, setParamsData, loading }) => {
  const [countValues, setCountValues] = useState([])

  useEffect(() => {
    getAdmListData()
  }, [])

  const click = () => {
    handleQuery(paramsData)
  }
  const onQueryChange = (v, t) => {
    if (t === 'time' && Array.isArray(v)) {
      const st = v[0].format('YYYY-MM-DD HH:00:00')
      const et = v[1].format('YYYY-MM-DD HH:00:00')
      setParamsData((state) => {
        state.start_time = st
        state.end_time = et
        return {
          ...state
        }
      })
    }
    if (t == 'area') {
      setParamsData((state) => {
        state.county_id = v
        return {
          ...state
        }
      })
    }
  }
  const getAdmListData = async () => {
    const res = await getAdmList({ adm_level: '3' })
    res.unshift({ county_id: -1, county_name: '全部' })
    setCountValues(res)
  }
  return (
    <Form>
      <Form layout="inline">
        <Form.Item label="时间">
          <DatePicker.RangePicker
            showNow
            showTime
            value={[dayjs(paramsData.start_time), dayjs(paramsData.end_time)]}
            format={'YYYY-MM-DD'}
            onChange={(v) => {
              onQueryChange(v, 'time')
            }}
          />
        </Form.Item>
        <Form.Item label="区域选择">
          <Select
            placeholder={`请选择`}
            value={paramsData?.county_id}
            onChange={(v) => onQueryChange(v, 'area')}
          >
            {countValues &&
              countValues.map((item, index) => {
                return (
                  <Select.Option key={index} value={item.county_id}>
                    {item.county_name}
                  </Select.Option>
                )
              })}
          </Select>
        </Form.Item>
        <Form.Item label="企业名称">
          <Input placeholder="请输入企业名称" />
        </Form.Item>
        <Form.Item label="反馈状态">
          <Select></Select>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            onClick={() => click('query')}
            loading={loading}
            icon={<SearchOutlined></SearchOutlined>}
          >
            查询
          </Button>
        </Form.Item>
      </Form>
    </Form>
  )
}

export default Filter
